<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货位</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <style>
        .cell {
            text-align: center;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
        h3 a{
            text-decoration: none;
            color: black;
        }

    </style>
</head>
<body>
<h3>
    <a href="">货位管理</a>
</h3>
<div id="app">
    <template>
        <el-container>
            <el-container>
                <el-aside width="100%">
                    <el-tree
                            :data="menus"
                            :props="defaultProps">
                    </el-tree>
                </el-aside>
            </el-container>

            <el-container >
                <el-header width="100%">
                    <el-form :inline="true" class="demo-form-inline" size="mini">
                        <el-form-item label="货架编号">
                            <el-input v-model="cargo1.shelvesNo" autocomplete="off"
                                      @change="shelveChange(cargo1.shelvesNo)"></el-input>
                        </el-form-item>
                        <el-form-item label="货位编号">
                            <el-input v-model="cargo1.cargoNo" autocomplete="off"
                                      @change="cargoChange(cargo1.cargoNo)"></el-input>
                        </el-form-item>

                        <el-form-item label="商品状态">
                            <el-select v-model="status" placeholder="请选择状态">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="find">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-header>

                <el-main width="100%">
                    <el-button style="margin-top: 10px;" icon="el-icon-plus" size="mini"
                               @click="dialogFormVisible = true">添加货位
                    </el-button>
                    <el-table style="width: 100%"
                              :data="cargos"
                              ref="siteTable"
                              align="center">
                        <el-table-column label="序号" width="50px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="货位编号" width="80px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.cargoNo }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="所属货架" width="90px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.shelvesNo }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="所属货区" width="90px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.warehouse.goodsName }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="所属仓库" width="90px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.menu.wareName }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="负责人" width="70px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.menu.person }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="联系电话">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.menu.telephone }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="放置物品">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.product }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="物品数量" width="80px">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.productNum }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="创建时间">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.creatTime }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.status"
                                        active-text="有货"
                                        active-color="#13ce66"
                                        @change="wareStatus(scope.row.id,scope.row.status)"
                                        inactive-text="无货" style="font-size: 12px">
                                </el-switch>
                            </template>

                        </el-table-column>

                        <el-table-column label="操作" width="120px">
                            <template slot-scope="scope">
                                <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                                    编辑
                                </el-button>
                                <!--                        <el-popconfirm icon-color="red" title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">-->
                                <!--                            <el-button size="mini" icon="el-icon-delete" type="danger" slot="reference">删除</el-button>-->
                                <!--                        </el-popconfirm>-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style="margin-top: 10px;">
                        <el-pagination @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-sizes="page_size"
                                       :page-size="4"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="count"
                                       :background="back">
                        </el-pagination>
                    </div>
                </el-main>
            </el-container>

            <el-dialog title="货架操作" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
                <el-form :model="cargo" label-width="80px">
                    <el-form-item label="所属货区">

                        <el-select v-model="cargo.menuId"
                                   clearable placeholder="请选择仓库"
                                   @change="handleChange($event)">
                            <el-option
                                    v-for="menu in menus"
                                    :key="menu.wareNo"
                                    :label="menu.wareName"
                                    :value="menu.wareNo">
                            </el-option>
                        </el-select>

                        <el-select v-model="cargo.warehouseId"
                                   clearable placeholder="请选择库区"
                                   @change="handleChangeWarehouse($event)">
                            <el-option
                                    v-for="warehouse in warehouses"
                                    :key="warehouse.goodsNo"
                                    :label="warehouse.goodsName"
                                    :value="warehouse.goodsNo">
                            </el-option>
                        </el-select>

                    </el-form-item>

                    <el-form-item label="所属货架">
                        <el-select v-model="cargo.shelvesNo" clearable placeholder="请选择货架">
                            <el-option
                                    v-for="shelve in shelves"
                                    :key="shelve.shelvesNo"
                                    :label="shelve.shelvesNo"
                                    :value="shelve.shelvesNo">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="货位编号">
                        <el-input v-model="cargo.cargoNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="放置商品">
                        <el-input v-model="cargo.product" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="批次">
                        <el-input v-model="cargo.batch" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveSite()">确 定</el-button>
                </div>
            </el-dialog>
        </el-container>
    </template>


</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 当前页数
                currentPage: 1,
                // 订单总数
                count: 0,
                // 每页的数据
                page_size: [6, 3],
                // 当前每页的数据
                pageSize: 6,
                // 分页背景
                back: true,

                //左侧列表
                list:[],

                //仓库
                menus: [],
                menuId: 0,

                //库区
                warehouses: [],

                //货架有关
                shelves: [],

                //货位有关
                cargos: [],
                cargo: {},
                //将查询对象分开
                cargo1:{},

                //商品状态选择
                options: [{
                    value: 0,
                    label: "无货"
                }, {
                    value: 1,
                    label: "有货"
                }, {
                    value: null,
                    label: "----"
                }],

                //动态sql的参数
                shelvesNo: null,
                cargoNo: null,
                status: null,


                //模态框
                dialogFormVisible: false,
                flag: 0,

                defaultProps: {
                    label: 'wareName',
                    children: 'children'
                },


                isCollapse: false
            }
        },
        methods: {
            // handleOpen(key, keyPath) {
            //     console.log(key, keyPath);
            // },
            // handleClose(key, keyPath) {
            //     console.log(key, keyPath);
            // },


            shelveChange(val) {
                if (val == "") {
                    this.shelvesNo = null;
                } else {
                    this.shelvesNo = val;
                }
            },
            cargoChange(val) {
                if (val == "") {
                    this.cargoNo = null;
                } else {
                    this.cargoNo = val;
                }
            },

            // 加载货位
            loadCargos() {
                axios.get("/cargos/" + this.currentPage + "/" + this.pageSize + "?shelvesNo=" + this.shelvesNo + "&&cargoNo=" + this.cargoNo + "&&status=" + this.status)
                    .then(res => {
                        this.cargos = res.data.data;
                        this.count = res.data.count;
                    })
            },
            //加载所有仓库
            loadMenus() {
                axios.get("/tMenus")
                    .then(res => {
                        for (let i = 0;i < res.data.length; i++){
                            for (let j = 0;j < res.data[i].children.length;j++){
                                res.data[i].children[j].wareName = res.data[i].children[j].goodsName;
                                for (let k = 0;k < res.data[i].children[j].children.length;k++){
                                    res.data[i].children[j].children[k].wareName = res.data[i].children[j].children[k].shelvesNo
                                    for (let l = 0;l < res.data[i].children[j].children[k].children.length;l++){
                                        res.data[i].children[j].children[k].children[l].wareName = res.data[i].children[j].children[k].children[l].cargoNo
                                    }
                                }
                            }
                        }
                        this.menus = res.data;                    })
            },

            // 更新,添加货位
            saveSite() {
                if (this.flag == 0) {
                    axios.post("/cargo", this.cargo)
                        .then(res => {
                            if (res.data == "ok") {
                                this.loadCargos();
                            }else {
                                this.$message({
                                    message: "添加失败"
                                })
                            }
                        });
                } else {
                    axios.put("/cargo", this.cargo)
                        .then(res => {
                            if (res.data == "ok") {
                                this.loadCargos();
                            }
                        });
                }
                this.dialogFormVisible = false;
            },
            // 更新货位状态
            wareStatus(id, status) {
                axios.put("/cargo/" + id + "/" + status)
                    .then(res => {
                        if (res.data == "ok") {
                            this.$message({
                                type: "success",
                                message: "更新成功"
                            })
                        }
                    })
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.loadCargos();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadCargos();
            },
            handleEdit(index, row) {
                this.cargo = row;
                this.flag = 1;
                this.dialogFormVisible = true;
            },
            // 删除站点
            handleDelete(index, row) {
                if (this.cargos.length == 1) {
                    this.currentPage = this.currentPage - 1;
                }
                axios.delete("/cargo/" + row.id)
                    .then(res => {
                        if (res.data == "ok") {
                            this.loadCargos();
                        }
                    });
            },
            //清空修改角色模态框数据
            closeDialog() {
                this.flag = 0;
                this.cargo = {};
            },

            //下拉框
            handleChange(value) {
                this.$set(this.cargo,"warehouseId","");
                this.$set(this.cargo,"shelvesNo","");
                this.warehouses = [];
                this.shelves = [];
                if (value == "") {

                } else {
                    axios.get("/menu/" + value)
                        .then(res => {
                            this.menuId = res.data.id;
                            axios.get("/warehouses/" + this.menuId)
                                .then(res => {
                                    if (res.data == null) {
                                        this.warehouses = [];
                                    } else {
                                        this.warehouses = res.data;
                                    }
                                })
                        });
                }

            },

            handleChangeWarehouse(value) {
                this.$set(this.cargo,"shelvesNo","");
                this.shelves = [];
                axios.get("/shelve/" + value)
                    .then(res => {
                        this.shelves = res.data;
                    })
            },

            //搜索
            find() {
                this.loadCargos();
            }
        },
        mounted() {
            this.loadCargos();
            this.loadMenus();
        }
    });
</script>
</body>
</html>